<template>
  <div style="padding-bottom: 0.65rem">

    <!--店铺信息-->
    <div class="weui-panel__bd">
      <div class="weui-media-box weui-media-box_appmsg shop">
        <div class="weui-media-box__hd" v-if="!shopDetail.smImageUrl">
        </div>
        <div class="weui-media-box__hd" v-if="shopDetail.smImageUrl" :style="'backgroundImage: url('+(shopDetail.smImageUrl.substr(0,4).toLowerCase() == 'http' ? shopDetail.smImageUrl : resUrl+shopDetail.smImageUrl)+')'">
        </div>
        <div class="weui-media-box__bd">
          <h4 class="weui-media-box__title">
            <span>{{shopDetail.name}}</span>
            <span class="authentication" v-if="shopDetail.status==7">认证商铺</span>
          </h4>
          <p class="weui-media-box__desc">
            <span>{{shopDetail.creditRating}}</span><span>粉丝:{{shopDetail.followersNum}}</span>
          </p>
          <router-link :to="{name:'shopDetail',query:{shopId:shopDetail.id}}" class="shop-btn">
            <span>进店逛逛</span>
            <span class="icon icon-more"></span>
          </router-link>
        </div>
      </div>
    </div>

    <!--专场详情-->
    <div class="special-detail">
      <div class="special-detail-left">
        <h4 class="special-title">
          {{specialDetail.name}}
        </h4>
        <p class="special-info" v-if="specialDetail.status==specialRelease&&specialDetail.startTime<specialDetail.timestamp&&specialDetail.timestamp<specialDetail.endTime">
          开拍时间{{specialDetail.startTime | convertDate}} | 拍品{{specialDetail.productNum}}件 | 关注{{specialDetail.followersNum}}次
        </p>
        <p class="special-info" v-else-if="specialDetail.status==specialRelease&&specialDetail.startTime>specialDetail.timestamp">
          结拍时间{{specialDetail.endTime | convertDate}} | 拍品{{specialDetail.productNum}}件 | 关注{{specialDetail.followersNum}}次
        </p>
        <p class="special-info" v-else>
          已结拍 | 成交拍品0件 | 成交金额0.00元
        </p>
      </div>
      <div class="collect" @click="followClick">
        <span class="icon icon-favorites" :class="{red:isFollow}"></span>
        <span :class="{red:isFollow}">关注/提醒</span>
      </div>
    </div>
    <div class="text">
      <p class="introduce" :class="{active:isActive}">{{specialDetail.presentation}}</p>
      <p class="more"><span class="icon icon-moreunfold" @click="introduceShow"></span></p>
    </div>

    <div class="splitBlock"></div>

    <!--分类选择-->
    <choice :dynastyList="dynastyList" title="specialDetail" v-on:listenToChildEvent="getChoice"></choice>

    <!--专场拍品列表-->
    <div class="special-prolist">
      <router-link v-for="pro in productList" :key="pro.id" :to="{name:'lotDetail',query:{lotId:pro.id,shopId:pro.shopId}}">

        <mt-swipe :auto="3000" style="height: 10rem">
          <mt-swipe-item>
            <div class="swipe-img" :style="'backgroundImage: url('+(pro.mxImageUrl.substr(0,4).toLowerCase() == 'http' ? pro.mxImageUrl : resUrl+pro.mxImageUrl)+')'">
              <span class="tag" v-if="pro.type==4">藏品</span>
              <span class="tag" style="background-color: #BCBCBC" v-else-if="pro.status==20">已成交</span>
              <span class="tag" v-else-if="pro.status==10&&pro.startTime<pro.timestamp&&pro.timestamp<pro.endTime">竞拍中</span>
              <span class="tag" style="background-color: #FFA600" v-else-if="pro.status==10&&pro.startTime>pro.timestamp">预展中</span>
              <span class="tag" style="background-color: #BCBCBC" v-else-if="pro.status==10">已结拍</span>
              <span class="tag" style="background-color: #BCBCBC" v-else>已成交</span>
            </div>
          </mt-swipe-item>
        </mt-swipe>

        <div class="special-prolist-detail">
          <h3 class="special-prolist-title">{{pro.name}}</h3>
          <div class="special-prolist-view">
            <span>出价{{pro.bidTimes}}</span>
            <span>浏览{{pro.viewTimes}}</span>
            <span>收藏{{pro.followersNum}}</span>
          </div>
          <div class="special-prolist-pricebox">
            <span class="special-prolist-price">￥{{pro.currentPrice | toDecimal}}</span>
            <span class="special-prolist-time">结束时间 {{pro.endTime | convertDate}}</span>
          </div>
        </div>
      </router-link>
    </div>

    <pagination :total="total" v-on:listenToChildEvent="getPageIndex"></pagination>
  </div>
</template>

<script>
  import {ipconfig} from '../../assets/js/ipconfig';
  import {getUser,getStatusMapByKey} from '../../assets/js/tools.js';
  import {getDynastyList,getSpecialDetail,getFollow,updateSpecialFollowers,getProductList} from '../../assets/js/getData';
  export default {
    name: "specialDetail",
    data(){
      return {
        resUrl:ipconfig.resUrl,//图片、视频、音频等资源访问路径
        shopDetail:{},
        specialDetail:{},
        isActive:false,

        dynastyList:[],//朝代列表

        productList:[],//获取专场详情页面拍品列表
        total:null,//总页数

        choiceObj:{
          specialId:null,//专场ID
          pageSize:5,//每页显示
          pageNum:1,//第几页
          type:null,//拍品类别：1一口价 2竞拍
          status:null,//拍品状态（11：预展中 12：竞拍中 20：已结束）
          descType:null,//排序：2综合排序，2浏览次数多到少，3浏览次数少到多，4收藏最多，5即将结拍，6价格高到低，7价格低到高，8出价次数高到低，9出价次数低到高
          dynastyId:null,//朝代ID
          currentPriceMin:null,//最低价
          currentPriceMax:null,//最高价
          startTime:null,//开始时间
          endTime:null,//结束时间
        },

        isFollow:null,//是否关注

        specialRelease:null,//已发布10
        specialInOver:null,//已结束20
        specialInAuction:null,//竞拍中12
        specialInPreview:null,//预展中11

      }
    },
    created(){
      this.choiceObj.status =  getStatusMapByKey('eProductStatus').inAuction.val;//12
      this.choiceObj.descType = getStatusMapByKey('eOrderByType').bySynthesisDesc.val;//2

      let eSpecialStatus = getStatusMapByKey('eSpecialStatus');
      this.specialRelease = eSpecialStatus.release.val;//已发布10
      this.specialInOver = eSpecialStatus.inOver.val;//已结束20
      this.specialInAuction = eSpecialStatus.inAuction.val;//竞拍中12
      this.specialInPreview = eSpecialStatus.inPreview.val;//预展中11

      this.choiceObj.specialId = this.$route.query.specialId;
      if(getUser()){
        //用户是否关注
        this.getFollow();
      }

      //获取专场及其店铺信息
      this.getSpecialDetail(1);

      //获取朝代分类
      getDynastyList({
        specialId:this.choiceObj.specialId,
      }).then(res => {
        if(res.data.reqResult.code>0){
          this.dynastyList = res.data.data;
        }else {
          Toast(res.data.reqResult.msg);
        }
      });


      //获取专场详情页面拍品列表
      this.getProductList(this.choiceObj);
    },
    methods:{
      getChoice(choiceObj){
        console.log(choiceObj,"父级");
        this.choiceObj.type = choiceObj.type;
        this.choiceObj.status = choiceObj.status;
        this.choiceObj.descType = choiceObj.descType;
        this.choiceObj.dynastyId = choiceObj.dynastyId;
        this.choiceObj.currentPriceMin = choiceObj.currentPriceMin;
        this.choiceObj.currentPriceMax = choiceObj.currentPriceMax;
        this.choiceObj.startTime = choiceObj.startTime;
        this.choiceObj.endTime = choiceObj.endTime;

        this.getProductList(this.choiceObj);
      },
      getPageIndex(pageIndex){
        this.choiceObj.pageNum = parseInt(pageIndex);
        this.getProductList(this.choiceObj);
      },
      //获取专场详情信息
      async getSpecialDetail(type){
        let params = {};
        if(type==1){
          params = {
            id:this.choiceObj.specialId,
            type:type
          }
        }else {
          params = {
            id:this.choiceObj.specialId
          }
        }
        let res = await getSpecialDetail(params);
        if(res.data.reqResult.code>0){
          this.shopDetail = res.data.data.shop;
          this.specialDetail = res.data.data.special;
        }else {
          Toast(res.data.reqResult.msg);
        }
      },
      //获取专场详情页面拍品列表
      async getProductList(params){
        let res = await getProductList(params);
        if(res.data.reqResult.code>0){
          this.productList = res.data.data;
          this.total = Math.ceil(res.data.total / this.choiceObj.pageSize);
        }else {
          Toast(res.data.reqResult.msg);
        }
      },
      introduceShow(){
        this.isActive = !this.isActive;
      },
      //点击收藏关注
      async followClick(){
        if(getUser(this,this.$route.fullPath)){
          if(this.isFollow){
            //取消关注
            let res = await updateSpecialFollowers(this.choiceObj.specialId,0);
            if(res.data.reqResult.code>0){
              this.getFollow();
              this.getSpecialDetail();
              Toast('取消收藏成功');
            }else {
              Toast(res.data.reqResult.msg);
            }
          }else {
            //关注
            let res = await updateSpecialFollowers(this.choiceObj.specialId,1);
            if(res.data.reqResult.code>0){
              this.getFollow();
              this.getSpecialDetail();
              Toast('收藏成功');
            }else {
              Toast(res.data.reqResult.msg);
            }
          }
        }
      },
      //获取用户是否关注
      async getFollow(){
        let res = await getFollow(this.choiceObj.specialId,3);
        if(res.data.reqResult.code>0){
          this.isFollow = res.data.data;
        }else {
          Toast(res.data.reqResult.msg);
        }
      },

    }
  }
</script>

<style scoped>
  /*店铺信息*/
  .shop-btn{
    color: #999999;
  }
  .shop-btn .icon-more{
    font-size: 0.8rem;
    font-weight: bold;
  }
  /*顶部*/
  .collect{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .collect .icon-favorites{
    font-size: 0.65rem;
    color: #808080;
  }
  .collect span:last-child{
    font-size: 0.5rem;
    color: #808080;
  }
  /*专场详情*/
  .special-detail{
    border-top: 1px solid #E5E5E5;
    border-bottom: 1px solid #E5E5E5;
    padding: 0.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .special-title{
    height: 1.25rem;
    line-height: 1.25rem;
    font-size: 0.9rem;
    color: #1A1A1A;
  }
  .special-info{
    margin-top: 0.15rem;
    height: 0.85rem;
    line-height: 0.85rem;
    font-size: 0.6rem;
    color: #999999;
  }
  .text{
    padding: 0.5rem 0.75rem 0 0.75rem;
    font-size: 0.6rem;
    color: #808080;
  }
  .introduce{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    line-height: 0.9rem;
    text-indent: 0.9rem;
  }
  .introduce.active{
    display: block;
  }
  .more{
    text-align: center;
    margin-top: 0.25rem;
    padding-bottom: 0.15rem;
  }
  .more .icon-moreunfold{
    font-size: 0.8rem;
    color: #808080;
  }
  /*专场拍品列表*/
  .special-prolist{
    background-color: #F2F2F2;
  }
  .special-prolist:after{
    content: '';
    display: table;
  }
  .special-prolist a{
    display: block;
    margin-bottom: 0.6rem;
    padding: 0.5rem;
    background-color: #ffffff;
  }
  .special-prolist a:first-child{
    padding-top: 0;
  }
  .swipe-img{
    height: 100%;
    background-origin: content-box;
    background-position:50% 50%;
    background-size:contain;
    background-repeat:no-repeat;
    background-color: rgba(0,0,0,0.2);
    position: relative;
  }
  .special-prolist-detail{
    margin-top: 0.25rem;
  }
  .special-prolist-title{
    font-size: 0.9rem;
    color: #1A1A1A;
    line-height: 1.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 90%;
  }
  .special-prolist-view{
    margin-top: 0.1rem;
  }
  .special-prolist-view span{
    font-size: 0.45rem;
    color: #999999;
    height: 0.65rem;
    line-height: 0.65rem;
    border: 0.5px solid #999999;
    border-radius: 2px;
    box-sizing: border-box;
    padding: 0 0.2rem;
  }
  .special-prolist-pricebox{
    display: flex;
    justify-content: space-between;
    line-height: 1rem;
    margin-top: 0.1rem;
  }
  .special-prolist-price{
    font-size: 0.7rem;
    color: #C50000;
  }
  .special-prolist-time{
    font-size: 0.5rem;
    color: #999999;
  }
</style>

